<template>
	<ul class="normal-bg-t mt16">
       <dl>
           <dd><span>爱车：<i>上海大众-新帕萨特...</i></span></dd>
           <dd>
             <!--  <span class="seclect-plate-btn">沪</span><input class="plate-text" type="text" placeholder="输入车牌号" /> -->
               <span class="gray">沪BBB148</span>
           </dd>
       </dl>
       <dl>
           <dd><span>联系人：<i class="phone-num">18321233422</i></span></dd>
           <dd>
              <input class="username-text" type="text" placeholder="输入联系人姓名" />
              <!-- <span>昂爱国</span> -->
           </dd>
       </dl>
       <dl>
           <dd><span>服务门店：</span></dd>
           <dd>
               <span class="gray">车享家澳门路店</span>
           </dd>
       </dl>
       <dl>
           <dd><span>到店时间：</span></dd>
           <dd>
               <input type="button" class="gostore-time" value="9月12日 周一 上午">
           </dd>
       </dl>
	</ul>

    <ul class="normal-bg no-pd-r mt16">
    <li>
       <h3>
           <span>在线支付项</span>
           <span>
               共3项
           </span>
       </h3>
      <p>
           <span>小保养(全合成机油套餐)</span>
           <span><i>¥</i>238.20</span>
       </p>
       <p>
           <span>洗车(普洗——5座)</span>
           <span><i>¥</i>38.20</span>
       </p>
       <p>
           <span>洗车(普洗——5座)</span>
           <span><i>¥</i>38.20</span>
       </p>
       <p class="pd-b8">
           <span>空气净化除味处理</span>
           <span>赠送</span>
       </p>
       </li>
       <li>
           <div class="amount">总计<span class="num"><small>¥</small>298.<small>00</small></span></div>
       </li>
       </ul>

    <ul class="normal-bg no-pd-r mt16">
    <li>
       <h3>
           <span>到店支付项</span>
           <span>
               共2项
           </span>
       </h3>
      <p>
           <span>更换空气滤清器</span>
           <span><i>¥</i>238.20</span>
       </p>
       <p  class="pd-b8">
           <span>更换火花塞</span>
           <span><i>¥</i>38.20</span>
       </p>
       </li>
       <li>
       <!-- <div class="amount">总计<span class="num"><small>¥</small>298.<small>00</small></span></div> -->
           <div class="amount"><span class="gray">以上项目需要到店支付，价格仅供参考</span></div>
       </li>
       </ul>


    <ul class="normal-bg mt16">
        <li>
           <h4>
               <span>赠送</span>
               <span>
                   10元抵扣券(线下消费完成之后，优惠券会发给您)
               </span>
           </h4>
        </li>
    </ul>


    <ul  class="normal-bg mt16 mb40">
        <li>
           <h4>
               <span>优惠券5张可用</span>
               <span class="ticket">10元现金-APP专享</span>
               <!-- <span class="gray ticket" >
                   未使用
               </span> -->
           </h4>
        </li>
    </ul>
    <div class="pay-confirm" ca="提交订单-确认下单">
            <dl id="payConfirmOnline">
                <dt>
                <p>
               <span>
                    在线支付<span class="red"><small>¥</small>421.<small>20</small></span>
                </span>
                <!--  <br/>
                   <span class="gray s">其他项目需到店支付</span>
                    <span class="gray">以上项目需到店支付</span> -->
                </p>
                </dt>
                    <dd>
                     <input type="button" value="确认下单" class="ui-btn">
                    </dd>
            </dl>
        </div>
</template>


<style lang="scss" scoped>
	@import '../../assets/css/_functions.scss';
	@import '../../assets/css/_variables.scss';
	
    .normal-bg-t{
        background-color: $_fff;
        font-size:rem(14);
    }
	.normal-bg{
       background-color: $_fff;
       padding: rem(12) rem(15);
       font-size: rem(14);
       i{
       margin-right: rem(5);
       }
	}
    
    .normal-bg-t {
        dl{
        clear:both;
        overflow: hidden;
        height: rem(44);
        line-height: rem(44);
        margin-left:rem(15);
        border-bottom: 1px solid #c8c7cc;
        dd{
           float:left;
        }
        dd:last-child{float: right;padding-right: rem(15);}
        }
        dl:last-child{
            border-bottom: 0
        }
    }

    ul{
        li{ 
            border-bottom:1px solid #c8c7cc;
            p {color: $_666;line-height:rem(30);font-size:rem(13);}
            h3 {line-height:rem(27);}
            h4 span:last-child{font-size: rem(13);}
        }
        li:last-child{ border-bottom:0;}
    }

    ul li p span:last-child,ul li h3 span:last-child,ul li h4 span:last-child{
       float: right;
    }
    .seclect-plate-btn{
        background: #0299f6 url(../../assets/images/arrow-b.png) no-repeat rem(20) center;
        display:inline-block;
        width: rem(30);
        height: rem(24);
        border-radius: rem(4);
        line-height: rem(24);
        color: #fff;
        padding-left: rem(4);
    }
    .plate-text{
        background: none;
        border:none;
        width: rem(70);
        margin-top: rem(-4);
        margin-left: rem(7);
        color: #243742;
    }
    i{
        color: $_999;
    }
    .username-text{
        background: none;
        border:none;
        width: rem(96);
        margin-top: rem(-4);
        margin-left: rem(7);
        color: #243742;
    }
    .amount{
        height:rem(30);
        line-height:rem(30);
        text-align: right;
        padding-top: rem(5);
        padding-right: rem(15);
    }
    .num{
        color: #f00;
        font-size: rem(16);
    }
    .num small:first-child{
        margin:0 rem(5);
    }
    .mb40{
        margin-bottom: rem(80);
    }
    .no-pd-r{
        padding-right: 0;
    }
    .no-pd-r p,.no-pd-r h3{padding-right: rem(15);}
    .gostore-time,.ticket{background: transparent url(../../assets/images/arrow.png) no-repeat right 0.3rem;
        padding-right: rem(12);       
    }
    .gostore-time{border:none;text-align:right; line-height: rem(14);height: rem(16);
        margin-top: rem(-5);}
    .phone-num{
        background:transparent url(../../assets/images/phone.png) no-repeat left center;
        padding-left: rem(15);
    }
    .pd-b8{
        padding-bottom: rem(8);
    }
    .pay-confirm {
        width: 100%;
        height:rem(48);
        background: #fafbfc;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        border-top: 1px solid #e7e7e7;
        dl{
            dt {
                float: left;
                font-size:rem(14);
                padding-left: 1.5rem;
                p{
                    display: table-cell;
                    height:rem(48);
                    vertical-align: middle;
                }
                small:first-child{margin:0 rem(5)}
                .s{font-size:rem(12);}
            }
            dd{
                float: right;
            }
        }
        .ui-btn {
            width:rem(120);
            height: rem(48);
            line-height: rem(48);
            border-radius: 0;
            background-color: #ff6600;
            font-size: rem(18);
            color: #fff;
            border:none;
        }
    }
</style>